<template>
    <div class="jackpot-result">

        <common-table>
            <template #header>
                <div class="flex-x-start">
                    <el-input style="width: 250px;" v-model="state.queryParams.keyword"
                        placeholder="请输入规则名称"></el-input>
                    <el-button style="margin-left: 10px;" type="primary" @click="onSearch">查询</el-button>
                    <el-button @click="handleDispose('add')" style="margin-left: 10px;" type="primary">
                        添加赔率规则
                    </el-button>
                </div>
            </template>

            <el-table align="center" height="100%" border :data="state.oddRuleList">
                <el-table-column align="center" min-width="100" prop="oddsName" label="规则名称"></el-table-column>
                <el-table-column align="center" min-width="100" prop="oddsValue" label="赔率">
                    <template #default="{ row }">
                        1 : {{ row.oddsValue }}
                    </template>
                </el-table-column>
                <el-table-column align="center" min-width="100" prop="betType" label="玩法"></el-table-column>
                <el-table-column align="center" min-width="100" prop="isActive" label="规则状态">
                    <template #default="{ row }">
                        <el-tag :type="row.isActive ? 'success' : 'danger'">{{ row.isActive ? '已激活' : '未激活'
                        }}</el-tag>
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column fixed="right" align="center" width="150" label="操作">
                    <template #default="{ row }">
                        <div class="flex justify-center">
                            <el-button type="primary" size="small" @click="handleDispose('edit', row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="handleDispose('delete', row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-pagination v-model:current-page="state.queryParams.page" v-model:page-size="state.queryParams.limit"
                    @current-change="onSearch" :page-sizes="[100, 200, 300, 400]"
                    layout="total, sizes, prev, pager, next, jumper" :total="state.total">
                </el-pagination>
            </template>
        </common-table>
        <el-dialog @close="handleClose" v-model="dialogVisible" width="500px" :title="state.dialogTitle">
            <div>
                <el-form :model="state.form" ref="formRef" label-width="auto">
                    <el-form-item label="规则名称">
                        <el-input v-model="state.form.oddsName" placeholder="请输入规则名称"></el-input>
                    </el-form-item>
                    <el-form-item label="玩法">
                        <el-input v-model="state.form.betType" placeholder="请输入玩法"></el-input>
                    </el-form-item>
                    <el-form-item label="赔率">
                        <el-input type="number" v-model="state.form.oddsValue" placeholder="请输入赔率"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-switch v-model="state.form.isActive" :inactive-value="0" :active-value="1" active-text="启用"
                            inactive-text="禁用"></el-switch>
                    </el-form-item>
                </el-form>
            </div>

            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang='ts'>
import CommonTable from '@/components/common-table.vue'
import { JackpotApi } from '@/api/jackpot'
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
const queryInit = {
    page: 1,
    limit: 100,
    keyword: ''
}
const formInit = {
    betType: '',
    oddsValue: 1.98,
    isActive: 1,
}

const dialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)

const state = reactive<any>({
    queryParams: Object.assign({}, queryInit),
    oddRuleList: [],
    total: 0,
    currentRow: {},
    dialogType: 'add',
    dialogTitle: '新增规则',
    form: Object.assign({}, formInit)
})

const onSearch = () => {
    JackpotApi.getOddRuleList(state.queryParams).then(res => {
        state.oddRuleList = res.data.data
        state.total = res.data.total
    })
}

const handleClose = () => {
    state.form = Object.assign({}, formInit)
    formRef.value?.resetFields()
}

const handleDispose = (type: string, row?: any) => {
    state.currentRow = row || {}
    if (type === 'edit') {
        state.form.oddsName = row.oddsName
        state.form.betType = row.betType
        state.form.oddsValue = row.oddsValue
        state.form.isActive = row.isActive
    }
    switch (type) {
        case 'add':
        case 'edit':
            dialogVisible.value = true
            state.dialogType = type
            state.dialogTitle = type === 'add' ? '新增规则' : '编辑规则'
            break
        case 'delete':
            ElMessageBox.confirm('是否删除该条规则？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                JackpotApi.deleteOddRule({
                    ruleId: row.id
                }).then(res => {
                    if (res.code === 200) {
                        ElMessage.success('删除成功')
                        onSearch()
                    }
                })
            })
            break
    }
}

const onSubmit = () => {
    state.form.oddsValue = Number(state.form.oddsValue)
    if (state.dialogType === 'add') {
        JackpotApi.disposeOddRule(state.form).then(res => {
            if (res.code === 200) {
                ElMessage.success('新增规则成功')
                onSearch()
                dialogVisible.value = false
            }
        })
    } else {
        state.form.ruleId = state.currentRow.id
        JackpotApi.disposeOddRule(state.form).then(res => {
            if (res.code === 200) {
                ElMessage.success('编辑规则成功')
                onSearch()
                dialogVisible.value = false
            }
        })
    }
}


const init = () => {
    onSearch()
}

init()


</script>
<style scoped lang='scss'>
.jackpot-result {
    height: 100%;
}
</style>
